<template>
  <div id="container" class="box">
    <div id="cesiumContainer">
        <div class="modelMenu">
            <div v-for="(item,index) in modelList" :key='index' class="modelItem" @click="changeModels(item.url)">
                {{item.title}}
            </div>
        </div>
        <button @click="show">轨迹</button>
    </div>
  </div>
</template>

<script>

export default {
  name: "travel1",
  data() {
    return {
      url: "http://localhost:3000/models/CesiumAir/Cesium_Air.glb",
      modelList : [
          {
              title : 'CesiumAir',
              url : 'http://localhost:3000/models/CesiumAir/Cesium_Air.glb'
          },
          {
              title : 'CesiumBalloon',
              url : 'http://localhost:3000/models/CesiumBalloon/CesiumBalloon.glb'
          },
          {
              title : 'CesiumMan',
              url : 'http://localhost:3000/models/CesiumMan/Cesium_Man.glb'
          },
          {
              title : 'CesiumMilkTruck',
              url : 'http://localhost:3000/models/CesiumMilkTruck/CesiumMilkTruck.glb'
          },
          {
              title : 'GroundVehicle',
              url : 'http://localhost:3000/models/GroundVehicle/GroundVehicle.glb'
          },
          {
              title : 'Pawns',
              url : 'http://localhost:3000/models/Pawns/Pawns.glb'
          },
          {
              title : 'ShadowTester',
              url : 'http://localhost:3000/models/ShadowTester/Shadow_Tester.glb'
          },
          {
              title : 'WoodTower',
              url : 'http://localhost:3000/models/WoodTower/Wood_Tower.glb'
          },
          
      ],
      Cesium : '',
      view : '',
      czml:[],
      dataSourcePromise:'',
      i:'',
      a:'',
      data:[],
      start:'',
      stop:null,
      viewer:'',




    };
  },
  mounted() {
    
    this.Cesium = this.cesium;
    this.view = new this.Cesium.Viewer('cesiumContainer',{
    baseLayerPicker:false,
    timeline:true,
    homeButton:false,
    fullscreenButton:false,
    infoBox:false,
    sceneModePicker:false,
    navigationInstructionsInitiallyVisible:false,
    navigationHelpButton:false,
    shouldAnimate : true,
    imageryProvider : new this.Cesium.UrlTemplateImageryProvider({
    url: "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
   // url:"http://localhost:3000/odm_orthophoto_titles/odm_orthophoto.original/{z}/{x}/{y}.png"
    })
    });

   

    this.data[0] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:116.2821, dimension:39.918145, height:100, time:40},{longitude:115.497402, dimension:39.344641, height:70000, time:100},{longitude:107.942392, dimension:29.559967, height:70000, time:280}, {longitude:106.549265, dimension:29.559967, height:0, time:360}];
    this.data[1] = [{longitude:116.405419, dimension:39.918034, height:0, time:0},{longitude:117.034586, dimension:39.881202, height:0, time:40},{longitude:116.340088, dimension:38.842224, height:70000, time:100},{longitude:113.489176, dimension:23.464017, height:70000, time:280}, {longitude:113.262084, dimension:23.13901, height:0, time:360}];
    this.data[2] = [{longitude:118.838979, dimension:32.073514, height:0, time:0},{longitude:118.438838, dimension:32.03777, height:0, time:40},{longitude:117.802406, dimension:31.91231, height:70000, time:100},{longitude:104.043645, dimension:35.993845, height:70000, time:280}, {longitude:101.807224, dimension:-36.660972, height:0, time:360}];


    this.start = this.Cesium.JulianDate.fromDate(new Date(2017,7,11));
    // 结束时间
    this.stop = this.Cesium.JulianDate.addSeconds(this.start, 360, new this.Cesium.JulianDate());


    this.view.scene.globe.enableLighting = true;
    this.init();
    
  },
  methods: {
    changeModels(url){
        this.url = url
        this.init()
    },
    init() {
      let Cesium = this.Cesium;
      var viewer = this.view
      //地图源换成高德
      
      this.createModel(this.url, 10000, viewer, Cesium);

      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
    },
    createModel(url, height, viewer, Cesium) {
     
      var position = Cesium.Cartesian3.fromDegrees(119.36978014013846, 32.36050917346674,height);
      var heading = Cesium.Math.toRadians(135);
      var pitch = 0;
      var roll = 0;
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      );
      var entity = viewer.entities.add({
        name: url,
        position: position,
        orientation: orientation,
        model: {
          uri: url,
          minimumPixelSize: 128,
          maximumScale: 20000,
        },
      });
      viewer.trackedEntity = entity;
     // viewer.carema.lookAt(entity)
    },
    show(){
        function computeFlight(source,start) {
            // 取样位置 相当于一个集合
            
            let property = new Cesium.SampledPositionProperty();
            for(let i=0; i<source.length; i++){
                let time = Cesium.JulianDate.addSeconds(start, source[i].time, new Cesium.JulianDate);
                let position = Cesium.Cartesian3.fromDegrees(source[i].longitude, source[i].dimension, source[i].height);
                // 添加位置，和时间对应
                property.addSample(time, position);
            }
            return property;
        }
        let Cesium=this.Cesium
        let view=this.view

         let start=this.start
          let stop=this.stop

       let data=this.data
       view.clock.startTime = start.clone();
    // 设置时钟当前时间
    view.clock.currentTime = start.clone();
    // 设置始终停止时间
    view.clock.stopTime  = stop.clone();
    // 时间速率，数字越大时间过的越快
    view.clock.multiplier = 10;
    // 时间轴
    view.timeline.zoomTo(start,stop);
    // 循环执行,即为2，到达终止时间，重新从起点时间开始
    view.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
 
// view.camera.flyTo({
//     destination:Cesium.Cartesian3.fromDegrees(116.405419,32.073514,20000)
// })
    for(let j=0; j<data.length; j++){
    let property = computeFlight(data[j],start);

    //console.log(property)
    // 添加模型
    let planeModel = view.entities.add({
        // 和时间轴关联
        availability : new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({
            start : start,
            stop : stop
        })]),
        position: property,
        // 根据所提供的速度计算模型的朝向
        orientation: new Cesium.VelocityOrientationProperty(property),
        // 模型数据
        model: {
            uri: 'http://localhost:3000/models/CesiumAir/Cesium_Air.glb',
            minimumPixelSize:128
        }
    });
 
    }


    
    },
    
  },
};
</script>

<style lang='scss' scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.modelMenu{
    position: absolute;
    left: 20px;
    top: 20px;
    width: 100px;
    text-align: center;
    height: 500px;
    z-index: 99;
    color: aqua;
    font-weight: bold;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
}

.modelItem{
    cursor: pointer;
}
</style>
